<template>
  <div class="forget_wrap">
    <el-steps :active="active" simple>
      <el-step title="输入账号"></el-step>
      <el-step title="找回方式"></el-step>
      <el-step title="重置密码"></el-step>
    </el-steps>
    <div class="center-box" v-if="active === 1">
      <el-form :model="acountForm" :rules="acountRole" ref="acountForm">
        <el-form-item label="账号" prop="accountName">
          <el-col :span="24">
            <el-input
              v-model="acountForm.accountName"
              placeholder="请输入要重置的账号"
            ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="active === 2" class="send-code">
      <div>
        您正在对
        <el-button type="text">{{ acountForm.accountName }}</el-button>
        进行重置密码操作
      </div>
      <el-tabs tab-position="left" style="height: 200px">
        <el-tab-pane label="通过短信方式找回">
          <el-button
            @click="sendCode"
            :loading="codeLoading"
            type="primary"
            icon="el-icon-chat-round"
          >
            发送手机验证码
          </el-button>
        </el-tab-pane>
        <el-tab-pane label="通过邮件方式找回">
          <el-button
            @click="sendEmail"
            :loading="emailLoading"
            type="primary"
            icon="el-icon-message"
          >
            发送邮箱验证码
          </el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <div v-if="active === 3">
      <el-form :model="acountForm" :rules="[
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, message: '账户长度大于3', trigger: 'blur' }
      ]" ref="acountForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="accountNumber">
          <el-input v-model="ruleForm.accountNumber" placeholder="请输入要重置的账号"></el-input>
        </el-form-item>
      </el-form>
    </div> -->
    <el-button round @click="next" type="primary" class="next-btn"
      >下一步</el-button
    >
    <el-button @click="goLogin" type="text">返回登录</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      emailOff: false,
      active: 1,
      acountForm: {
        accountName: ''
      },
      codeLoading: false,
      emailLoading: false,
      acountRole: {
        accountName: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 返回登录
    goLogin() {
      location.reload()
    },
    // 发送手机验证码
    sendCode() {
      this.codeLoading = true
      this.$axios
        .get(this.$locat.sso_reset, {
          params: { username: this.acountForm.accountName }
        })
        .then((res) => {
          this.codeLoading = false
        })
    },
    // 发送邮箱验证码
    sendEmail() {
      this.emailLoading = true
      this.$axios
        .get(this.$locat.sso_fromemail, {
          params: { username: this.acountForm.accountName }
        })
        .then((res) => {
          this.emailLoading = false
        })
    },
    next() {
      if (this.active === 1) {
        this.$refs['acountForm'].validate((valid) => {
          if (valid) {
            this.$axios
              .get(this.$locat.sso_getdetail, {
                params: { username: this.acountForm.accountName }
              })
              .then((data) => {
                if (data.code == 1) {
                  this.active = 2
                  this.phone = data.data.phone
                  this.email = data.data.email
                }
              })
          } else {
            this.$message({
              message: '请操作好再进行下一步',
              type: 'error'
            })
            return false
          }
        })
      } else if (this.active === 2) {
      }
    }
  }
}
</script>
<style scoped lang="scss">
.forget_wrap {
  width: 60%;
  height: 500px;
  position: absolute;
  left: 20%;
  top: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .send-code {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
  }

  .center-box {
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .next-btn {
    width: 50%;
    margin: 0 auto;
  }

  .methods_wrap {
    width: 400px;
    margin-top: 20px;
    justify-content: space-between;
    background: #fff;
    display: flex;
    border: 1px solid #cccccc;
    padding: 8px;
    border-radius: 2px;

    .content1 {
      padding: 3px 0;
      font-size: 16px;
      color: #333333;
    }

    .content2 {
      font-size: 12px;
      color: #999999;
    }
  }

  .active_wrap {
    width: 400px;
    margin-top: 20px;
    justify-content: space-between;
    background: #fff;
    display: flex;
    border: 1px solid #0091ff;
    padding: 8px;
    border-radius: 2px;

    .content1 {
      padding: 3px 0;
      font-size: 16px;
      color: #333333;
    }

    .content2 {
      font-size: 12px;
      color: #999999;
    }
  }
}
</style>
